<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.item {
			width: 100px;
			height: 100px;
			border: 1px solid green;
			float: left;
		}
		
		#diagramContainer {
			padding: 20px;
			width: 80%;
			height: 400px;
			border: 1px solid gray;
			background-image: url(http://p3alsaatj.bkt.clouddn.com/20180227163310_1bVYeW_grid.jpeg);
			background-repeat: repeat;
		}
	</style>

	<body>
		<div id="diagramContainer">
			<div id="item_left" class="item"></div>

			<div id="item_right" class="item" style="margin-top: 200px;margin-left:150px;"></div>

			<button type="text" id="name" style="height: 80px;margin:200px 200px ;" onclick="alert('HHH')">哈哈哈哈哈哈哈</button>
		</div>
		<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
		<script>
			jsPlumb.importDefaults({
				PaintStyle: {
					strokeWidth: 13,
					stroke: 'rgba(200,0,0,0.5)'
				},
				DragOptions: {
					cursor: "crosshair"
				},
				Endpoints: [
					["Dot", {
						radius: 7
					}],
					["Dot", {
						radius: 11
					}]
				],
				EndpointStyles: [{
					fill: "#225588"
				}, {
					fill: "#558822"
				}]
			});
			jsPlumb.ready(function() {
				var common = {
					endpoint: 'Rectangle',
					connector: ['Bezier'],
					anchor: ['Left', 'Right']
				}

				var chen = {
					endpoint: 'Rectangle',
					connector: ['Bezier'],
					anchor: ['Left', 'Right'],
				}

				jsPlumb.connect({
					source: 'item_left',
					target: 'item_right'
				}, chen)

				jsPlumb.connect({
					source: 'name',
					target: 'item_right'
				}, chen)

				jsPlumb.draggable('item_left')
				jsPlumb.draggable('item_right')
			})
		</script>
	</body>

</html>